const { src, dest, parallel, series, watch } = require('gulp')

const del = require('del')
const browserSync = require('browser-sync')

const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()
const bs = browserSync.create() //创建开发服务器

const cwd=process.cwd()//返回命令行当前工作的目录
let config={}
try {
  const loadConfig=require(`${cwd}/pages.config.js`)
  config=Object.assign({},config,loadConfig)
} catch (e) {
  //default config here
}
const clean = () => {
    return del(['dist', 'temp'])
}

const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' })
        .pipe(plugins.sass( //sass会默认不转换以_开头的文件
            { outputStyle: 'expanded' } //expanded为完全展开，即把转换后的文本按照正常使用的习惯展开
        ))
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}

const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
        .pipe(plugins.babel({ presets: [require('@babel/preset-env')] }))
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}

const page = () => {
    return src('src/*.html', { base: 'src' })
        .pipe(plugins.swig({ data:config.data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}

const image = () => {
    return src('src/assets/images/**', { base: 'src' })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const font = () => {
    return src('src/assets/fonts/**', { base: 'src' })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const extra = () => {
    return src('public/**', { base: 'public' })
        .pipe(dest('dist'))
}

const serve = () => {
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)

    bs.init({
        notify: false,
        port: 2080,
        // open: false,
        // files: 'dist/**',
        server: {
            baseDir: ['temp', 'src', 'public'],
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    })
}

const useref = () => {
        return src('temp/*.html', { base: 'temp' })
            .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
            // html js css
            .pipe(plugins.if(/\.js$/, plugins.uglify()))
            .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
            .pipe(plugins.if(/\.html$/, plugins.htmlmin({
                collapseWhitespace: true,
                minifyCSS: true,
                minifyJS: true
            })))
            .pipe(dest('dist'))
    }
    //构建优化
    //parallel:相当于异步
    //series:相当于同步
const compile = parallel(style, script, page) //同时进行

// 上线之前执行的任务
const build = series( //顺序进行
    clean,
    parallel( //同时进行
        series(compile, useref),
        image,
        font,
        extra
    )
)

const develop = series(compile, serve)
    //最终只导出这三个任务，其它任务不是用户需要看到的
module.exports = {
    clean,
    build,
    develop
}